<template>
  <div>
    <city-header></city-header>
    <city-search
      :cities="cities"
    ></city-search>
    <city-list
      :cities="cities"
      :hotCities="hotCities"
      :letter="letter"
      :index="index"
    ></city-list>
    <alpha-bet
      :cities="cities"
      @letterChange="handleLetterChange"
      @letterScroll="handleLetterScroll"
    ></alpha-bet>
  </div>

</template>
<script>
  import CityHeader from './components/CityHeader'
  import CitySearch from './components/CitySearch'
  import CityList from './components/CityList'
  import AlphaBet from './components/AlphaBet'
  import axios from 'axios'
    export default {
        name: "City",
        components: {
          CityHeader,
          CitySearch,
          CityList,
          AlphaBet
        },
       data(){
          return{
            hotCities: [],
            cities:{},
            letter:'',
            index:null
          }
       },
      methods:{
        getCityInfo(){
          axios.get('/api/city.json').then(
            (res,req)=>{
              this.getCityInfoSucc(res)
            }
          )
        },
        getCityInfoSucc(res){
            if(res.data.ret){
              var res = res.data.data
              this.hotCities = res.hotCities;
              this.cities = res.cities;
            }
        },
        handleLetterChange(letter){
              this.letter = letter;
        },
        handleLetterScroll(index){
            this.index=index
        }
      },
      mounted(){
          this.getCityInfo();
      }
    }
</script>

<style scoped>

</style>
